import { dirname, join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from '@rspack/cli';
import { rspack } from '@rspack/core';
import { VueLoaderPlugin } from 'vue-loader';

const __dirname = dirname(fileURLToPath(import.meta.url));

// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];

export default defineConfig({
  context: __dirname,
  entry: {
    main: './src/main.js'
  },
  devServer: {
    port: 9000,
    static: {
      directory: join(__dirname, 'static')
    }
  },
  resolve: {
    extensions: ['...', '.ts', '.vue']
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          experimentalInlineMatchResource: true
        }
      },
      {
        test: /\.(js|ts)$/,
        exclude: [/node_modules[\\/]core-js/],
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                parser: {
                  syntax: 'typescript'
                }
              },
              env: {
                coreJs: '3.42.0',
                targets
              }
            }
          }
        ]
      },
      {
        test: /\.css$/,
        // 对标 webpack 的配置
        // use: ['style-loader', 'css-loader', 'postcss-loader'],
        // type: 'javascript/auto'

        // 使用 rspack 内置的 lightningcss-loader
        // 开启 experiment.css 之后， rspack 内部可以直接处理 css 文件，所以这里可以不用再配置 style-loader，css-loader
        use: [
          {
            loader: 'builtin:lightningcss-loader',
            options: {
              targets
            }
          }
        ], // builtin:lightningcss-loader 可以替代 postcss-loader 和 autoprefixer 的 CSS 语法降级、添加前缀等功能
        type: 'css/auto'
      },
      {
        test: /\.scss$/,
        // 对标 webpack 的配置
        // use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
        // type: 'javascript/auto'

        // 使用 rspack 内置的 lightningcss-loader
        use: [
          {
            loader: 'builtin:lightningcss-loader',
            options: {
              targets
            }
          },
          'sass-loader'
        ],
        type: 'css/auto'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        type: 'asset',
        // generator: {
        //   filename: utils.assetsPath('img/[name]_[hash:8][ext][query]')
        // },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        type: 'asset',
        // generator: {
        //   filename: utils.assetsPath('media/[name]_[hash:8][ext][query]')
        // },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: 'asset',
        // generator: {
        //   filename: utils.assetsPath('fonts/[name]_[hash:8][ext][query]')
        // },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024
          }
        }
      }
    ]
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './index.html'
    }),
    new rspack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    }),
    new VueLoaderPlugin()
  ],
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: { targets }
      })
    ]
  },
  experiments: {
    // css: false
    css: true
  }
});
